<template>
    <view class="page">
        
        <view class="g-product-list">
            <view class="g-product" v-for="(item,index) in data " :key="index">
                <view class="g-product-pic">
                    <image :src="item.thumb"></image>
					<image class="u-product-sign" :src="item.promotion_id == 1 ? '../../static/icons/ydt/product8.png' : '../../static/icons/ydt/product_free.png'" mode="widthFix"></image>
                </view>
                <view class="g-product-info">
                    <view class="u-product-name f-two-ellipsis"><text class="u-order">第{{item.no}}期</text>{{item.goods_name}}</view>
					<view class="luck-text">本期幸运儿:</view>
                    <view class="g-price"><image class="u-product-status" :src="item.head_pic_text"></image><text>{{item.nickname}}</text></view>
                    <view class="small-text">公布时间&nbsp;&nbsp;{{item.open_time}}</view>
                </view>
            </view>
        </view>
		<view class="m-b-loading" v-if="showLoading">
		    <image src="../../static/images/loading2.gif" mode="widthFix"></image>
			<text>加载中</text>
		</view>
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
			return {
				data: [],
				total_pages:1,//总页数
				showLoading: false,
				page:1
			};
        }, 
        methods: {
            request(type) {
				let that = this;
				that.showLoading = true;
				if(that.page <= that.total_pages){
					henglang.get('app/getNewLotteryMore',{page:that.page},false,function(res){
						that.showLoading = false;
						let list = res.data.data
						if (list.length === 0) {
							return false;
						}
						if (type == 'plus') {
							that.data = that.data.concat(list);
						} else {
						    that.data = list;
							that.total_pages = res.data.total_pages;
						}
					});					
				}else{
					that.showLoading = false;
				}
            }
        },
        onReady() {
			let that = this;
            this.request();
        },
        onReachBottom() {
			this.page += 1;
            this.request('plus');
        }
    }
</script>

<style>


    /* 产品 */
    .g-product-list {
        padding: 10px;
    }

    .g-product {
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        margin-bottom: 10px;
        display: flex;
        padding: 10px;
        position: relative;
    }

    .g-product-pic {
        width: 190upx;
        height: 190upx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
		position: relative;
    }
	.g-product-pic image{
		width: 100%;
		height: 100%;
	}
    .g-product-info {
        flex: 1;
        position: relative;
    }
    .g-price {
        font-size: 24upx;
        color: #d71311;
        margin-bottom: 5px;
		display: flex;
		align-items: center;
    }
    .g-price text {
        font-size: 36upx;
    }
	.g-price .u-product-status {
        width: 68upx;
		height: 68upx;
		margin-right: 10upx;
		border-radius: 50px;
    }
	.luck-text{
		font-size: 28upx;
	}
    .small-text {
        color: #828080;
    }
    .u-product-name {
		max-height: 82upx;
		line-height: 41upx;
    }
    .u-order {
        font-size: 24upx;
        color: #D71511;
        border: 1px solid #D71511;
        border-radius: 2px;
        padding: 0 2px;
		margin-right: 8upx;
    }
	.g-product-pic .u-product-sign {
	    position: absolute;
	    top: -10upx;
	    left: -10upx;
	    width: 75upx;
		height: 75upx;
	}
    
	
</style>
